<template>
  <div class="wrapper">
    <el-menu class="el-menu-demo" mode="horizontal" style="height: 50px">
      <div style="width: 300px; text-align: center; margin-top: 10px">
        <el-link style="font-family: 华文行楷; font-size: 30px; color: #409EFF" :underline="false" @click="$router.push('/front/home')">网上诊疗平台</el-link>
      </div>
    </el-menu>
    <div class="line"></div>
    <div style="margin: 160px auto; background-color: #fff;width: 330px; height: 330px; padding: 20px; border-radius: 30px">
      <div style="margin: 20px 0; text-align: center; font-size: 25px"><b>管理员登录</b></div>
      <el-form :model="user" :rules="rules" ref="Form">
        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
        </el-form-item>
        <!--    图片验证码    -->
        <el-form-item>
        <el-input
          v-model="code"
          placeholder="验证码"
          size="medium" style="margin: 10px 0; width: 160px" prefix-icon="el-icon-circle-check"
        >
        </el-input>
        <div @click="refreshCode" style="float: right; margin-top: 8px">
          <identify-code
            :identifyCode="identifyCode"
            :contentWidth="150"
            :contentHeight="38"
            :fontSizeMin="40"
          />
        </div>
        </el-form-item>
        <el-form-item style="margin: 10px 0; text-align: center;">
          <el-button type="primary" style="width: 100px" autocomplete="off" @click="login">登  录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {setRoutes} from "../router";
import IdentifyCode from '../components/IdentifyCode'

export default {
  name: "AdminLogin",
  data() {
    return {
      user: {},
      role: "",
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
      },
      code: "",
      valid: true,
      //生成验证码的字符范围
      identifyCodes: "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
      //生成的验证码
      identifyCode: "",
    }
  },
  components: {
    'identify-code': IdentifyCode,
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    login() {
      this.$refs['Form'].validate((valid) => {
        if (valid) { //表单校验合法
          if (this.codeRules(this.code)){
            this.request.post("/admin/login",this.user).then(res => {
              if(!res.success){
                this.$message.error(res.data)
              }else{
                console.log(res.data)
                this.$message.success("登录成功")
                localStorage.setItem("adminInfo",JSON.stringify(res.data))  //存储用户信息到浏览器
                //localStorage.setItem("menus",JSON.stringify(res.data.menus))
                //localStorage.setItem("token",JSON.stringify(res.token))
                //动态设置当前用户的路由
                //setRoutes()
                this.$router.push("/home")
              }
            })
          }else{
            this.refreshCode()
          }
        }
      });
    },
    //生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    //刷新验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    //生成验证码，l为生成验证码的长度
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        //随机字符串拼接
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
          ];
      }
    },
    //图片验证规则校验
    codeRules(value) {
      console.log(this.identifyCode)
      console.log(value)
      if (value.length === 0) {
        this.$message.error("验证码不能为空")
        return false;
      } else if (value.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$message.error("验证码输入不正确")
        return false;
      } else {
        return true;
      }
    },
  }
}
</script>

<style scoped>
.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #f1f1f1 , #8DA8FF);
  overflow: hidden;
}
.codeImg {
  margin-top: 5px;
  float: right;
}

</style>
